<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>发现好文 - 知享社交</title>
    <!-- Bootstrap 5 CSS -->
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css" rel="stylesheet">
    <!-- Font Awesome -->
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
    
    <style>
        /* 基础样式 */
        body {
            font-family: 'Inter', system-ui, sans-serif;
            background-color: #f9fafb;
            color: #111827;
            line-height: 1.6;
        }
        
        /* 导航栏 */
        .navbar {
            background-color: white;
            box-shadow: 0 1px 3px rgba(0,0,0,0.05);
        }
        
        .logo {
            font-weight: 700;
            font-size: 1.5rem;
            color: #3b82f6;
            display: flex;
            align-items: center;
            gap: 8px;
        }
        
        .search-bar {
            max-width: 400px;
            width: 100%;
        }
        
        .nav-link {
            color: #4b5563;
            font-weight: 500;
            transition: color 0.2s;
        }
        
        .nav-link:hover, .nav-link.active {
            color: #3b82f6;
        }
        
        /* 主体内容 */
        .main-container {
            padding: 2rem 0;
        }
        
        .section-title {
            font-size: 1.75rem;
            font-weight: 700;
            margin-bottom: 1.5rem;
            color: #111827;
            display: flex;
            align-items: center;
            gap: 10px;
        }
        
        .section-title i {
            color: #3b82f6;
        }
        
        /* 文章卡片基础样式 */
        .article-card {
            background-color: white;
            border-radius: 12px;
            overflow: hidden;
            box-shadow: 0 1px 3px rgba(0,0,0,0.05);
            transition: transform 0.2s, box-shadow 0.2s;
            margin-bottom: 1.5rem;
        }
        
        .article-card:hover {
            transform: translateY(-3px);
            box-shadow: 0 10px 15px rgba(0,0,0,0.07);
        }
        
        .article-content {
            padding: 1.25rem;
        }
        
        .article-title {
            font-size: 1.25rem;
            font-weight: 600;
            margin-bottom: 0.75rem;
            color: #111827;
            transition: color 0.2s;
        }
        
        .article-title:hover {
            color: #3b82f6;
        }
        
        .article-excerpt {
            color: #6b7280;
            margin-bottom: 1rem;
            display: -webkit-box;
            -webkit-line-clamp: 2;
            -webkit-box-orient: vertical;
            overflow: hidden;
        }
        
        /* 作者信息 */
        .author-info {
            display: flex;
            align-items: center;
            gap: 10px;
            margin-bottom: 1rem;
        }
        
        .author-avatar {
            width: 36px;
            height: 36px;
            border-radius: 50%;
            object-fit: cover;
        }
        
        .author-name {
            font-weight: 500;
            color: #111827;
            font-size: 0.9rem;
        }
        
        .post-time {
            font-size: 0.8rem;
            color: #9ca3af;
        }
        
        /* 互动数据 */
        .article-metrics {
            display: flex;
            align-items: center;
            gap: 1.25rem;
            color: #9ca3af;
            font-size: 0.85rem;
        }
        
        .metric-item {
            display: flex;
            align-items: center;
            gap: 5px;
        }
        
        /* 操作按钮 */
        .article-actions {
            display: flex;
            gap: 0.75rem;
        }
        
        .action-btn {
            background: none;
            border: none;
            color: #9ca3af;
            font-size: 0.85rem;
            display: flex;
            align-items: center;
            gap: 5px;
            padding: 5px 10px;
            border-radius: 6px;
            transition: all 0.2s;
            cursor: pointer;
        }
        
        .action-btn:hover {
            background-color: #f3f4f6;
            color: #3b82f6;
        }
        
        .action-btn.liked {
            color: #ef4444;
        }
        
        .action-btn.saved {
            color: #f59e0b;
        }
        
        /* 布局1: 大图文章 */
        .layout-featured .article-image {
            width: 100%;
            height: 250px;
            object-fit: cover;
        }
        
        .layout-featured .article-title {
            font-size: 1.75rem;
            margin-bottom: 1rem;
        }
        
        .layout-featured .article-excerpt {
            font-size: 1.1rem;
            line-height: 1.7;
            -webkit-line-clamp: 3;
        }
        
        /* 布局2: 左图右文 */
        .layout-left-image {
            display: flex;
        }
        
        .layout-left-image .article-image-container {
            flex: 0 0 35%;
        }
        
        .layout-left-image .article-image {
            width: 100%;
            height: 100%;
            object-fit: cover;
        }
        
        .layout-left-image .article-content {
            flex: 1;
            display: flex;
            flex-direction: column;
        }
        
        .layout-left-image .article-footer {
            margin-top: auto;
            display: flex;
            justify-content: space-between;
            align-items: center;
        }
        
        /* 布局3: 右图左文 */
        .layout-right-image {
            display: flex;
        }
        
        .layout-right-image .article-image-container {
            order: 2;
            flex: 0 0 35%;
        }
        
        .layout-right-image .article-image {
            width: 100%;
            height: 100%;
            object-fit: cover;
        }
        
        .layout-right-image .article-content {
            order: 1;
            flex: 1;
            display: flex;
            flex-direction: column;
        }
        
        .layout-right-image .article-footer {
            margin-top: auto;
            display: flex;
            justify-content: space-between;
            align-items: center;
        }
        
        /* 布局4: 多图文章 */
        .layout-multi-image .article-images {
            display: grid;
            grid-template-columns: repeat(3, 1fr);
            gap: 4px;
            height: 180px;
        }
        
        .layout-multi-image .article-image {
            width: 100%;
            height: 100%;
            object-fit: cover;
        }
        
        /* 布局5: 无图文章 */
        .layout-no-image {
            border-left: 4px solid #3b82f6;
        }
        
        /* 布局6: 网格布局 */
        .grid-layout {
            display: grid;
            grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
            gap: 1.5rem;
        }
        
        .grid-layout .article-image {
            width: 100%;
            height: 180px;
            object-fit: cover;
        }
        
        .grid-layout .article-footer {
            display: flex;
            justify-content: space-between;
            align-items: center;
        }
        
        /* 分类标签 */
        .category-tag {
            display: inline-block;
            padding: 3px 10px;
            border-radius: 20px;
            font-size: 0.75rem;
            font-weight: 500;
            margin-right: 0.5rem;
            margin-bottom: 0.75rem;
        }
        
        .cat-tech { background-color: #eff6ff; color: #2563eb; }
        .cat-life { background-color: #f0fdf4; color: #16a34a; }
        .cat-travel { background-color: #fef3c7; color: #d97706; }
        .cat-food { background-color: #fee2e2; color: #dc2626; }
        .cat-reading { background-color: #e0e7ff; color: #6366f1; }
        .cat-photo { background-color: #fce7f3; color: #c026d3; }
        
        /* 响应式调整 */
        @media (max-width: 992px) {
            .layout-left-image, .layout-right-image {
                flex-direction: column;
            }
            
            .layout-left-image .article-image-container,
            .layout-right-image .article-image-container {
                flex: none;
                height: 200px;
                order: 1;
            }
            
            .layout-right-image .article-content {
                order: 2;
            }
        }
        
        @media (max-width: 768px) {
            .layout-featured .article-image {
                height: 200px;
            }
            
            .layout-featured .article-title {
                font-size: 1.5rem;
            }
            
            .grid-layout {
                grid-template-columns: 1fr;
            }
            
            .article-footer {
                flex-direction: column;
                align-items: flex-start;
                gap: 0.75rem;
            }
            
            .section-title {
                font-size: 1.5rem;
            }
        }
        
        @media (max-width: 576px) {
            .article-metrics {
                flex-wrap: wrap;
                gap: 0.75rem;
            }
            
            .layout-featured .article-image {
                height: 160px;
            }
            
            .layout-multi-image .article-images {
                height: 140px;
            }
        }
    </style>
</head>
<body>
    <!-- 导航栏 -->
    <nav class="navbar navbar-expand-lg navbar-light py-3">
        <div class="container">
            <a href="#" class="logo">
                <i class="fas fa-lightbulb"></i>
                <span>知享社交</span>
            </a>
            
            <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarContent">
                <i class="fas fa-bars"></i>
            </button>
            
            <div class="collapse navbar-collapse" id="navbarContent">
                <div class="mx-auto search-bar">
                    <div class="input-group">
                        <input type="text" class="form-control rounded-pill" placeholder="搜索文章、话题或用户..." aria-label="Search">
                        <button class="btn btn-primary rounded-pill ms-2" type="button">
                            <i class="fas fa-search"></i>
                        </button>
                    </div>
                </div>
                
                <ul class="navbar-nav ms-auto gap-3">
                    <li class="nav-item">
                        <a href="#" class="nav-link">首页</a>
                    </li>
                    <li class="nav-item">
                        <a href="#" class="nav-link active">发现</a>
                    </li>
                    <li class="nav-item">
                        <a href="#" class="nav-link">关注</a>
                    </li>
                    <li class="nav-item">
                        <a href="#" class="nav-link">消息</a>
                    </li>
                    <li class="nav-item">
                        <a href="#" class="btn btn-primary rounded-pill">
                            <i class="fas fa-pen me-1"></i> 发布
                        </a>
                    </li>
                </ul>
            </div>
        </div>
    </nav>
    
    <!-- 主内容区 -->
    <div class="container main-container">
        <!-- 精选文章 - 大图布局 -->
        <section class="mb-8">
            <h2 class="section-title">
                <i class="fas fa-star"></i>
                精选推荐
            </h2>
            
            <div class="article-card layout-featured">
                <img src="https://picsum.photos/1200/400?random=1" alt="城市建筑摄影" class="article-image">
                <div class="article-content">
                    <span class="category-tag cat-photo">摄影</span>
                    <h3 class="article-title">
                        <a href="#" class="text-decoration-none">城市建筑摄影：捕捉现代都市的线条与光影之美</a>
                    </h3>
                    
                    <div class="author-info">
                        <img src="https://picsum.photos/200/200?random=101" alt="张明的头像" class="author-avatar">
                        <div>
                            <span class="author-name">张明</span>
                            <span class="post-time">· 3天前</span>
                        </div>
                    </div>
                    
                    <p class="article-excerpt">
                        现代城市建筑是人类文明的结晶，每一栋建筑都蕴含着设计师的巧思与时代的印记。本文将分享如何通过摄影镜头捕捉建筑的线条美感、光影变化和空间韵律，以及在不同时间、天气条件下的拍摄技巧。从对称构图到寻找独特视角，从宏观全景到微观细节，带你发现城市建筑中隐藏的艺术之美。
                    </p>
                    
                    <div class="article-footer d-flex justify-content-between align-items-center">
                        <div class="article-metrics">
                            <div class="metric-item">
                                <i class="far fa-eye"></i>
                                <span>3.2k</span>
                            </div>
                            <div class="metric-item">
                                <i class="far fa-comment"></i>
                                <span>86</span>
                            </div>
                            <div class="metric-item">
                                <i class="far fa-bookmark"></i>
                                <span>245</span>
                            </div>
                        </div>
                        
                        <div class="article-actions">
                            <button class="action-btn">
                                <i class="far fa-heart"></i>
                                <span>428</span>
                            </button>
                            <button class="action-btn">
                                <i class="far fa-bookmark"></i>
                                <span>收藏</span>
                            </button>
                            <button class="action-btn">
                                <i class="far fa-share-alt"></i>
                                <span>分享</span>
                            </button>
                        </div>
                    </div>
                </div>
            </div>
        </section>
        
        <!-- 热门文章 - 左图右文布局 -->
        <section class="mb-8">
            <h2 class="section-title">
                <i class="fas fa-fire-alt"></i>
                热门文章
            </h2>
            
            <div class="article-card layout-left-image">
                <div class="article-image-container">
                    <img src="https://picsum.photos/600/800?random=2" alt="咖啡制作过程" class="article-image">
                </div>
                <div class="article-content">
                    <span class="category-tag cat-food">美食</span>
                    <h3 class="article-title">
                        <a href="#" class="text-decoration-none">手冲咖啡入门指南：从选豆到萃取的完美掌握</a>
                    </h3>
                    
                    <div class="author-info">
                        <img src="https://picsum.photos/200/200?random=102" alt="李婷的头像" class="author-avatar">
                        <div>
                            <span class="author-name">李婷</span>
                            <span class="post-time">· 1周前</span>
                        </div>
                    </div>
                    
                    <p class="article-excerpt">
                        手冲咖啡不仅是一种饮品制作方式，更是一门需要耐心和技巧的艺术。本文将详细介绍手冲咖啡的基本原理、所需器具、咖啡豆选择标准，以及水温控制、研磨度、冲泡时间等关键参数的调整方法。通过循序渐进的步骤讲解，帮助咖啡爱好者从零开始掌握手冲技巧，制作出一杯香气四溢、口感平衡的完美咖啡。
                    </p>
                    
                    <div class="article-footer">
                        <div class="article-metrics">
                            <div class="metric-item">
                                <i class="far fa-eye"></i>
                                <span>5.7k</span>
                            </div>
                            <div class="metric-item">
                                <i class="far fa-comment"></i>
                                <span>132</span>
                            </div>
                        </div>
                        
                        <div class="article-actions">
                            <button class="action-btn liked">
                                <i class="fas fa-heart"></i>
                                <span>756</span>
                            </button>
                            <button class="action-btn">
                                <i class="far fa-bookmark"></i>
                                <span>收藏</span>
                            </button>
                        </div>
                    </div>
                </div>
            </div>
            
            <div class="article-card layout-right-image">
                <div class="article-image-container">
                    <img src="https://picsum.photos/600/800?random=3" alt="远程工作场景" class="article-image">
                </div>
                <div class="article-content">
                    <span class="category-tag cat-tech">职场</span>
                    <h3 class="article-title">
                        <a href="#" class="text-decoration-none">远程工作效率提升指南：如何在家中保持专注与创造力</a>
                    </h3>
                    
                    <div class="author-info">
                        <img src="https://picsum.photos/200/200?random=103" alt="王强的头像" class="author-avatar">
                        <div>
                            <span class="author-name">王强</span>
                            <span class="post-time">· 2周前</span>
                        </div>
                    </div>
                    
                    <p class="article-excerpt">
                        随着数字化转型的加速，远程工作已成为许多人的常态。然而，在家办公也面临着诸多挑战：如何建立工作边界、保持高效专注、避免拖延和倦怠？本文结合心理学研究和实际案例，分享了10个经过验证的远程工作效率提升方法，包括工作环境优化、时间管理技巧、沟通协作工具推荐等实用内容，帮助你在灵活工作的同时保持生产力。
                    </p>
                    
                    <div class="article-footer">
                        <div class="article-metrics">
                            <div class="metric-item">
                                <i class="far fa-eye"></i>
                                <span>8.9k</span>
                            </div>
                            <div class="metric-item">
                                <i class="far fa-comment"></i>
                                <span>215</span>
                            </div>
                        </div>
                        
                        <div class="article-actions">
                            <button class="action-btn">
                                <i class="far fa-heart"></i>
                                <span>1243</span>
                            </button>
                            <button class="action-btn saved">
                                <i class="fas fa-bookmark"></i>
                                <span>已收藏</span>
                            </button>
                        </div>
                    </div>
                </div>
            </div>
        </section>
        
        <!-- 多图文章 -->
        <section class="mb-8">
            <h2 class="section-title">
                <i class="fas fa-images"></i>
                图文故事
            </h2>
            
            <div class="article-card layout-multi-image">
                <div class="article-images">
                    <img src="https://picsum.photos/400/400?random=10" alt="旅行照片1" class="article-image">
                    <img src="https://picsum.photos/400/400?random=11" alt="旅行照片2" class="article-image">
                    <img src="https://picsum.photos/400/400?random=12" alt="旅行照片3" class="article-image">
                </div>
                <div class="article-content">
                    <span class="category-tag cat-travel">旅行</span>
                    <h3 class="article-title">
                        <a href="#" class="text-decoration-none">徒步喜马拉雅：在世界屋脊寻找内心的平静</a>
                    </h3>
                    
                    <div class="author-info">
                        <img src="https://picsum.photos/200/200?random=104" alt="刘阳的头像" class="author-avatar">
                        <div>
                            <span class="author-name">刘阳</span>
                            <span class="post-time">· 1个月前</span>
                        </div>
                    </div>
                    
                    <p class="article-excerpt">
                        喜马拉雅山脉不仅是地理上的高峰，更是许多旅行者心中的圣地。本文记录了为期15天的喜马拉雅徒步之旅，从准备工作到沿途见闻，从文化体验到心灵感悟。通过镜头和文字，带你领略世界屋脊的壮丽风光，感受当地居民的淳朴热情，以及在高海拔环境中挑战自我、寻找内心平静的独特体验。
                    </p>
                    
                    <div class="article-footer d-flex justify-content-between align-items-center">
                        <div class="article-metrics">
                            <div class="metric-item">
                                <i class="far fa-eye"></i>
                                <span>6.3k</span>
                            </div>
                            <div class="metric-item">
                                <i class="far fa-comment"></i>
                                <span>98</span>
                            </div>
                            <div class="metric-item">
                                <i class="far fa-bookmark"></i>
                                <span>512</span>
                            </div>
                        </div>
                        
                        <div class="article-actions">
                            <button class="action-btn">
                                <i class="far fa-heart"></i>
                                <span>876</span>
                            </button>
                            <button class="action-btn">
                                <i class="far fa-share-alt"></i>
                                <span>分享</span>
                            </button>
                        </div>
                    </div>
                </div>
            </div>
        </section>
        
        <!-- 无图文章 -->
        <section class="mb-8">
            <h2 class="section-title">
                <i class="fas fa-align-left"></i>
                深度阅读
            </h2>
            
            <div class="article-card layout-no-image">
                <div class="article-content">
                    <span class="category-tag cat-reading">思想</span>
                    <h3 class="article-title">
                        <a href="#" class="text-decoration-none">数字时代的注意力危机：我们如何重新掌控自己的专注能力</a>
                    </h3>
                    
                    <div class="author-info">
                        <img src="https://picsum.photos/200/200?random=105" alt="陈静的头像" class="author-avatar">
                        <div>
                            <span class="author-name">陈静</span>
                            <span class="post-time">· 3周前</span>
                        </div>
                    </div>
                    
                    <p class="article-excerpt">
                        在信息爆炸的数字时代，我们的注意力正被源源不断的通知、推送和短视频切割成碎片。这种碎片化的注意力不仅影响我们的工作效率，还可能改变我们的思维方式和认知能力。本文从心理学和神经科学的角度，分析了注意力分散的成因和危害，并提出了一系列实用的方法，帮助读者在数字环境中重建深度专注的能力，培养健康的信息消费习惯，找回内心的平静与创造力。
                    </p>
                    
                    <div class="article-footer d-flex justify-content-between align-items-center">
                        <div class="article-metrics">
                            <div class="metric-item">
                                <i class="far fa-eye"></i>
                                <span>4.1k</span>
                            </div>
                            <div class="metric-item">
                                <i class="far fa-comment"></i>
                                <span>156</span>
                            </div>
                            <div class="metric-item">
                                <i class="far fa-bookmark"></i>
                                <span>328</span>
                            </div>
                        </div>
                        
                        <div class="article-actions">
                            <button class="action-btn liked">
                                <i class="fas fa-heart"></i>
                                <span>642</span>
                            </button>
                            <button class="action-btn">
                                <i class="far fa-bookmark"></i>
                                <span>收藏</span>
                            </button>
                        </div>
                    </div>
                </div>
            </div>
            
            <div class="article-card layout-no-image">
                <div class="article-content">
                    <span class="category-tag cat-life">生活</span>
                    <h3 class="article-title">
                        <a href="#" class="text-decoration-none">极简主义生活实践：如何通过减法获得更有质量的人生</a>
                    </h3>
                    
                    <div class="author-info">
                        <img src="https://picsum.photos/200/200?random=106" alt="林小的头像" class="author-avatar">
                        <div>
                            <span class="author-name">林小</span>
                            <span class="post-time">· 1个月前</span>
                        </div>
                    </div>
                    
                    <p class="article-excerpt">
                        极简主义并非简单的"少即是多"，而是一种通过有意识地减少物质拥有和信息摄入，来专注于真正重要事物的生活哲学。本文分享了作者实践极简主义三年来的经验与感悟，包括如何开始整理家居空间、建立健康的消费习惯、简化数字生活、处理人际关系中的"冗余"等具体方法。通过真实案例和实用建议，展示极简主义如何帮助人们减轻压力、节省时间、提升专注力，最终获得更有意义和质量的人生。
                    </p>
                    
                    <div class="article-footer d-flex justify-content-between align-items-center">
                        <div class="article-metrics">
                            <div class="metric-item">
                                <i class="far fa-eye"></i>
                                <span>2.8k</span>
                            </div>
                            <div class="metric-item">
                                <i class="far fa-comment"></i>
                                <span>78</span>
                            </div>
                            <div class="metric-item">
                                <i class="far fa-bookmark"></i>
                                <span>215</span>
                            </div>
                        </div>
                        
                        <div class="article-actions">
                            <button class="action-btn">
                                <i class="far fa-heart"></i>
                                <span>367</span>
                            </button>
                            <button class="action-btn saved">
                                <i class="fas fa-bookmark"></i>
                                <span>已收藏</span>
                            </button>
                        </div>
                    </div>
                </div>
            </div>
        </section>
        
        <!-- 网格布局文章 -->
        <section class="mb-8">
            <h2 class="section-title">
                <i class="fas fa-th"></i>
                更多推荐
            </h2>
            
            <div class="grid-layout">
                <!-- 网格文章1 -->
                <div class="article-card">
                    <img src="https://picsum.photos/600/400?random=20" alt="晨间阅读时光" class="article-image">
                    <div class="article-content">
                        <span class="category-tag cat-reading">阅读</span>
                        <h3 class="article-title">
                            <a href="#" class="text-decoration-none">建立晨间阅读习惯：开启高效一天的5个技巧</a>
                        </h3>
                        
                        <div class="author-info">
                            <img src="https://picsum.photos/200/200?random=107" alt="赵文的头像" class="author-avatar">
                            <div>
                                <span class="author-name">赵文</span>
                                <span class="post-time">· 4天前</span>
                            </div>
                        </div>
                        
                        <p class="article-excerpt">
                            晨间阅读不仅能丰富知识，更能帮助我们建立积极的心态，为一天的工作和生活做好准备。
                        </p>
                        
                        <div class="article-footer">
                            <div class="article-metrics">
                                <div class="metric-item">
                                    <i class="far fa-eye"></i>
                                    <span>1.2k</span>
                                </div>
                                <div class="metric-item">
                                    <i class="far fa-comment"></i>
                                    <span>32</span>
                                </div>
                            </div>
                            
                            <div class="article-actions">
                                <button class="action-btn">
                                    <i class="far fa-heart"></i>
                                    <span>156</span>
                                </button>
                            </div>
                        </div>
                    </div>
                </div>
                
                <!-- 网格文章2 -->
                <div class="article-card">
                    <img src="https://picsum.photos/600/400?random=21" alt="城市夜景" class="article-image">
                    <div class="article-content">
                        <span class="category-tag cat-photo">摄影</span>
                        <h3 class="article-title">
                            <a href="#" class="text-decoration-none">城市夜景拍摄指南：捕捉夜晚都市的璀璨与神秘</a>
                        </h3>
                        
                        <div class="author-info">
                            <img src="https://picsum.photos/200/200?random=108" alt="黄亮的头像" class="author-avatar">
                            <div>
                                <span class="author-name">黄亮</span>
                                <span class="post-time">· 1周前</span>
                            </div>
                        </div>
                        
                        <p class="article-excerpt">
                            夜晚的城市有着与白天截然不同的魅力，灯光璀璨，氛围神秘，是摄影创作的绝佳题材。
                        </p>
                        
                        <div class="article-footer">
                            <div class="article-metrics">
                                <div class="metric-item">
                                    <i class="far fa-eye"></i>
                                    <span>2.1k</span>
                                </div>
                                <div class="metric-item">
                                    <i class="far fa-comment"></i>
                                    <span>47</span>
                                </div>
                            </div>
                            
                            <div class="article-actions">
                                <button class="action-btn liked">
                                    <i class="fas fa-heart"></i>
                                    <span>289</span>
                                </button>
                            </div>
                        </div>
                    </div>
                </div>
                
                <!-- 网格文章3 (无图) -->
                <div class="article-card">
                    <div class="article-content">
                        <span class="category-tag cat-tech">科技</span>
                        <h3 class="article-title">
                            <a href="#" class="text-decoration-none">人工智能如何改变我们的创作方式：机遇与挑战</a>
                        </h3>
                        
                        <div class="author-info">
                            <img src="https://picsum.photos/200/200?random=109" alt="孙科的头像" class="author-avatar">
                            <div>
                                <span class="author-name">孙科</span>
                                <span class="post-time">· 5天前</span>
                            </div>
                        </div>
                        
                        <p class="article-excerpt">
                            随着AI生成内容技术的快速发展，创作者的工作方式正在发生深刻变化，这既带来了新的机遇，也带来了伦理和版权方面的挑战。
                        </p>
                        
                        <div class="article-footer">
                            <div class="article-metrics">
                                <div class="metric-item">
                                    <i class="far fa-eye"></i>
                                    <span>3.5k</span>
                                </div>
                                <div class="metric-item">
                                    <i class="far fa-comment"></i>
                                    <span>128</span>
                                </div>
                            </div>
                            
                            <div class="article-actions">
                                <button class="action-btn">
                                    <i class="far fa-heart"></i>
                                    <span>432</span>
                                </button>
                            </div>
                        </div>
                    </div>
                </div>
                
                <!-- 网格文章4 -->
                <div class="article-card">
                    <img src="https://picsum.photos/600/400?random=22" alt="家常菜制作" class="article-image">
                    <div class="article-content">
                        <span class="category-tag cat-food">美食</span>
                        <h3 class="article-title">
                            <a href="#" class="text-decoration-none">忙碌上班族的健康晚餐：30分钟搞定营养均衡料理</a>
                        </h3>
                        
                        <div class="author-info">
                            <img src="https://picsum.photos/200/200?random=110" alt="吴佳的头像" class="author-avatar">
                            <div>
                                <span class="author-name">吴佳</span>
                                <span class="post-time">· 2周前</span>
                            </div>
                        </div>
                        
                        <p class="article-excerpt">
                            工作忙碌不应该成为吃垃圾食品的借口。本文分享5道简单易做、营养均衡的快手晚餐，让你在30分钟内享受健康美食。
                        </p>
                        
                        <div class="article-footer">
                            <div class="article-metrics">
                                <div class="metric-item">
                                    <i class="far fa-eye"></i>
                                    <span>1.8k</span>
                                </div>
                                <div class="metric-item">
                                    <i class="far fa-comment"></i>
                                    <span>64</span>
                                </div>
                            </div>
                            
                            <div class="article-actions">
                                <button class="action-btn">
                                    <i class="far fa-heart"></i>
                                    <span>215</span>
                                </button>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </section>
        
        <!-- 加载更多 -->
        <div class="text-center mb-4">
            <button class="btn btn-outline-primary rounded-pill px-5 py-2">
                <i class="fas fa-redo-alt me-2"></i>加载更多文章
            </button>
        </div>
    </div>
    
    <!-- 页脚 -->
    <footer class="bg-white border-top py-5">
        <div class="container">
            <div class="text-center text-muted">
                <div class="mb-3">
                    <a href="#" class="text-muted me-4"><i class="fab fa-weibo fa-lg"></i></a>
                    <a href="#" class="text-muted me-4"><i class="fab fa-wechat fa-lg"></i></a>
                    <a href="#" class="text-muted"><i class="fab fa-instagram fa-lg"></i></a>
                </div>
                <p>&copy; 2023 知享社交 - 分享知识，连接思想</p>
                <p class="small mt-2">隐私政策 | 使用条款 | 关于我们</p>
            </div>
        </div>
    </footer>

    <!-- Bootstrap 5 JS Bundle with Popper -->
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/js/bootstrap.bundle.min.js"></script>
    
    <script>
        // 点赞功能
        document.querySelectorAll('.action-btn').forEach(btn => {
            btn.addEventListener('click', function() {
                const icon = this.querySelector('i');
                
                // 点赞按钮逻辑
                if (icon.classList.contains('fa-heart')) {
                    if (icon.classList.contains('far')) {
                        icon.classList.remove('far');
                        icon.classList.add('fas');
                        this.classList.add('liked');
                        
                        // 更新点赞数
                        const countSpan = this.querySelector('span');
                        countSpan.textContent = parseInt(countSpan.textContent) + 1;
                    } else {
                        icon.classList.remove('fas');
                        icon.classList.add('far');
                        this.classList.remove('liked');
                        
                        // 更新点赞数
                        const countSpan = this.querySelector('span');
                        countSpan.textContent = parseInt(countSpan.textContent) - 1;
                    }
                }
                
                // 收藏按钮逻辑
                if (icon.classList.contains('fa-bookmark')) {
                    if (icon.classList.contains('far')) {
                        icon.classList.remove('far');
                        icon.classList.add('fas');
                        this.classList.add('saved');
                        this.querySelector('span').textContent = '已收藏';
                    } else {
                        icon.classList.remove('fas');
                        icon.classList.add('far');
                        this.classList.remove('saved');
                        this.querySelector('span').textContent = '收藏';
                    }
                }
                
                // 分享按钮逻辑
                if (icon.classList.contains('fa-share-alt')) {
                    alert('分享功能：可以通过链接、社交媒体等方式分享本文');
                }
            });
        });
        
        // 加载更多按钮
        document.querySelector('.btn-outline-primary').addEventListener('click', function() {
            this.innerHTML = '<i class="fas fa-spinner fa-spin me-2"></i>加载中...';
            
            // 模拟加载延迟
            setTimeout(() => {
                this.innerHTML = '<i class="fas fa-redo-alt me-2"></i>加载更多文章';
                alert('已加载全部内容');
            }, 1500);
        });
    </script>
</body>
</html>

